import InputModal from '../components/InputModal/index.js';

// 创建一个带class的DOM元素
function createIncludeClassDom(
  _document, // dom
  className, // class名
  type = 'div', // 元素类型
) {
  let dom = null;

  try {
    dom = (_document || document).createElement(type); // 首先创建一个元素
    dom.className = className; // 为这个元素添加一个class
  } catch (error) {
    console.log(error);
  }

  return dom;
}

// 创建聊天卡片dom
function cteateMessageDom(_document, atts) {
  // 创建一个容器div
  const dom = (_document || document).createElement('div');

  // 生成属性字符串
  const attributes = {...atts};
  delete attributes.uId;
  let attributeStr = '';
  for(let key in attributes) {
    attributeStr += `${humpToConnectline(key)}='${attributes[key]}' `;
  }

  // 生成卡片
  dom.innerHTML = `<chat-card ${attributeStr}/>`;

  return dom;
}

// 处理输入的名称
function getName(name) {

  let nameLength = 0;
  let currentIndex = name.length;
  [].every.call(name, (item, index) => {
    // 是汉字且字符长小于等于10
    if(name.charCodeAt(index) > 255 && nameLength <= 10) {
      nameLength += 2;
      return true;
    }else if(name.charCodeAt(index) <= 255 && nameLength <= 11) { // 不是汉字且字符长小于等于11
      nameLength ++;
      return true;
    }else {
      // 字符长等于12之后
      currentIndex = index;
      return false;
    }
  });

  return name.slice(0, currentIndex);
}

// 写入右上角昵称
function writeTopRightName(_document, value) {
  const h_u_name_dom = getDom(document, 'h-u-name');
  h_u_name_dom.innerHTML = value;
}

// 控制登录按钮显示隐藏
function controlButton(_document, type = false) {
  const login_dom = getDom((_document || document), 'login');

  if(type) {
    // 不显示登录
    login_dom.style.display = 'none';
  }else {
    // 显示登录
    login_dom.style.display = 'inline-block';
  }
}

// 控制vip图标灰度
function controlGrayscale(_document, number = 0) {
  const h_u_type_dom = getDom((_document || document), 'h-u-type');
  h_u_type_dom.style.filter = `grayscale(${number}%)`;
}

// 获取输入弹框
function getModalInput(obj = {}) {
  return new Promise((resolve, reject) => {
    const handle = (e) => {
      const content_dom = getDom(document, 'content');
      content_dom.style.display = 'block';
      resolve(e?.detail);
    }

    const modal = new InputModal({
      title: obj.title || '登录',
      inputLabel: obj.label || '请输入你的昵称',
      onCancel: handle,
      onOk: handle,
    });
  });
}

// 连接用户信息
const user = {};

// 获取连接
const mySocket = connectwebSocket();

// 连接成功-输入昵称-记录登录用户信息
mySocket.on('init', function(data) {
  const { success } = data || {};
  if(success) {
    // const userName = prompt('请输入你的昵称');
    getModalInput().then(userName => {
      // 获取唯一id
      user.userId = uuid();
      if(userName && userName !== '匿名用户') {
        user.userName = getName(userName);
        // 不显示登录按钮
        controlButton(document, true);
        controlGrayscale(document)
      }else {
        user.userName = '匿名用户';
        user.anonymous = true; // 匿名标识
        // 显示登录按钮
        controlButton(document);
      }

      // 昵称写入右上角
      writeTopRightName(document, user.userName);

      // 发送登录的用户信息到服务器
      mySocket.emit('login', { user });
    });
  }else{
    alert('服务器连接失败!');
  }
});

// 从服务器端接收(监听)用户信息
mySocket.on('userInfo', function(data) {
  const { userNameArr = [] } = data;

  if(userNameArr.length) {
    // 获取用户信息主体DOM
    const b_message_people_dom = getDom(document, 'b-message-people');
    let child = b_message_people_dom.lastElementChild;  
    while (child) { 
      b_message_people_dom.removeChild(child); 
      child = b_message_people_dom.lastElementChild; 
    };
    userNameArr.forEach(item => {
      const login_people_dom = createIncludeClassDom(document, 'login-people');
      login_people_dom.innerHTML = item; // 设置用户昵称文本
      b_message_people_dom.appendChild(login_people_dom);   // 把元素添加在容器中
    })
  }
})

// 从服务端接收(监听)消息数据
mySocket.on('message', function(data) {
  const { uMessage = {} } = data;
  const _data = {
    direction: uMessage.uId === user.userId ? 'right' : 'left',
    ...uMessage,
  };

  // 获取message的dom元素
  const u_message_dom = cteateMessageDom(document, _data);
  if(u_message_dom) {
    // 获取message的主体dom元素
    const all_message_dom = document.getElementById('b-center');
    all_message_dom.appendChild(u_message_dom);
  }
});

// 修改昵称|登录
window.setUserName = (type) => {
  const title = type === 'update' ? '修改昵称' : '登录';
  const label = type === 'update' ? '请输入你的新昵称' : '请输入你的昵称';
  // const userName = prompt(message);
  getModalInput({ title, label }).then(userName => {
    user.oldName = user.userName;
    if(userName) {
      user.userName = getName(userName);
      // 登录需要创建id
      if(user.anonymous) {
        user.userId = uuid();
        user.anonymous = false;
        controlGrayscale(document);
      };

      // 不显示登录按钮
      controlButton(document, true);

      // 昵称写入右上角
      writeTopRightName(document, user.userName);

      // 发送修改的用户信息到服务器
      mySocket.emit('updateName', { user });
    }
  });
}

// 退出
window.quit = () => {
  // window.location.reload();
  // 发出退出信息
  mySocket.emit('close', { user } );
  window.location.href = 'about:blank';
  window.close();
}

// 发送消息
window.sentMessage = () => {
  // 获取input输入值
  const input = getDom(document, 'send-message-input');
  if(input.value) {
    user.userMessage = input.value;

    // 发送消息到服务器
    mySocket.emit('message', { user });
    input.value = null;
  }
};

// 通过回车发送信息
getDom(document, 'content').onkeydown = (e) => {
  e = e || event;
  if(e.keyCode === 13) {
    sentMessage();
  }
}
